<template>
  <div class="form-container">
    <el-form
      :model="workForm"
      label-width="120px"
      :rules="rules"
      ref="workFormRef"
      class="work-form"
    >
      <!-- Work Content -->
      <el-form-item :label="content" prop="content">
        <el-input
          v-model="workForm.content"
          type="textarea"
          :rows="5"
          placeholder="请输入详细的工作内容..."
          class="content-input"
          resize="none"
        />
        <div class="form-tip">请详细描述工作内容（至少10个字符）</div>
      </el-form-item>

      <!-- Attachment -->
      <el-form-item :label="attachment" prop="attachment">
        <el-upload
          ref="uploadRef"
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="handleRemove"
          :limit="1"
          :file-list="fileList"
          :before-upload="beforeUpload"
          class="file-uploader"
        >
          <template #trigger>
            <el-button type="primary" :icon="Upload" class="upload-btn">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">
              支持上传 doc, docx, txt 格式文件，大小不超过 10MB
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <!-- Submit Button -->
      <el-form-item class="submit-item">
        <el-button
          type="primary"
          @click="submitWork"
          :loading="submitting"
          class="submit-btn"
        >
          {{ submitting ? '提交中...' : '提交工作内容' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { workInput, workFileUpload } from '@/api/workcontent.js'
import { Upload } from '@element-plus/icons-vue';

const workFormRef = ref(null)
const uploadRef = ref(null)
const submitting = ref(false)

const workForm = ref({
  content: '',
  attachment: null
})

const content = ref('工作内容')
const attachment = ref('工作附件')

const rules = {
  content: [
    { required: true, message: '工作内容不能为空', trigger: 'blur' },
    { min: 10, message: '工作内容至少 10 个字符', trigger: 'blur' },
  ]
}

const fileList = computed(() => {
  return workForm.value.attachment
    ? [{ name: workForm.value.attachment.name }]
    : []
})

const handleFileChange = (file, fileList) => {
  if (fileList.length > 0) {
    workForm.value.attachment = fileList[0].raw
  }
}

const beforeUpload = (file) => {
  const validTypes = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain']
  const isLt10M = file.size / 1024 / 1024 < 10
  const isValidType = validTypes.includes(file.type)

  if (!isValidType) {
    ElMessage.error('只能上传 doc, docx, txt 格式文件!')
    return false
  }

  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
    return false
  }

  return true
}

const handleRemove = () => {
  workForm.value.attachment = null
}

const submitWork = async () => {
  try {
    await workFormRef.value.validate()
    submitting.value = true

    const contentResponse = await workInput(workForm.value.content)
    const workId = contentResponse.data.data.id

    if (workForm.value.attachment) {
      await workFileUpload(workForm.value.attachment, workId)
    }

    ElMessage.success('提交成功')
    workFormRef.value.resetFields()
    workForm.value.attachment = null

  } catch (error) {
    ElMessage.error(`提交失败: ${error.response?.data?.message || error.message}`)
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.form-container {
  width: 75vw; /* 使用视口宽度单位 */
  max-width: 1200px; /* 设置最大宽度防止过大 */
  margin: 0 auto;
  padding: 20px;
}

.work-form {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 其他样式保持不变 */

/* 响应式设计调整 */
@media (max-width: 768px) {
  .form-container {
    width: 90vw; /* 在小屏幕上稍微缩小 */
    padding: 10px;
  }

  .work-form {
    padding: 20px 15px;
  }
}

@media (max-width: 480px) {
  .form-container {
    width: 95vw; /* 在非常小的屏幕上进一步调整 */
  }
}

.work-form {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-bottom: 5%;
}

.content-input {
  font-size: 14px;
  line-height: 1.5;
}

.content-input :deep(.el-textarea__inner) {
  padding: 12px;
  box-shadow: none;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s;
}

.content-input :deep(.el-textarea__inner):focus {
  border-color: #409eff;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  line-height: 1.5;
}

.file-uploader {
  width: 100%;
}

.upload-btn {
  margin-right: 10px;
}

.el-upload__tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.submit-item {
  margin-top: 30px;
  text-align: center;
}

.submit-btn {
  width: 200px;
  height: 40px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 10px;
  }

  .work-form {
    padding: 20px 15px;
  }

  .submit-btn {
    width: 100%;
  }
}
</style>
